<template>
  <div class="right">
    <CommonCard :value="value1" :option="option1" />
    <CommonCard :value="value2" :option="option2" />
  </div>
</template>

<script>
import CommonCard from "./CommonCard.vue";
export default {
  components: {
    CommonCard,
  },
  data() {
    return {
      value1: "订单同比增长",
      value2: "热门搜索",
      option1: {
        polar: {
          radius: "100%",
          center: ["50%", "50%"],
        },
        angleAxis: {
          axisLine: {
            show: false,
          },
        },
        radiusAxis: {
          type: "category",
          show: false,
        },
        series: [
          {
            type: "liquidFill",
            radius: "80%",
            center: ["50%", "50%"],
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(254, 13, 13)",
                  },
                ],
                globalCoord: false,
              },
            ],
            outline: {
              borderDistance: 2,
              itemStyle: {
                borderWidth: 2,
              },
            },
            data: [0.02],
            backgroundStyle: {
              color: "rgb(227, 247, 255)",
            },
          },
        ],
      },
      option2: {
        tooltip: {},
        series: [
          {
            type: "wordCloud",
            gridSize: 2,
            sizeRange: [30, 40], // 文字大小范围
            rotationRange: [-45, 45], // 文字旋转角度范围
            shape: "cardioid",
            textStyle: {
              color: function () {
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255),
                  ].join(",") +
                  ")"
                );
              },
            },
            data: [
              { name: "小龙虾", value: 876 },
              { name: "炸鸡腿", value: 712 },
              { name: "麻辣烫", value: 701 },
              { name: "汉堡", value: 678 },
              { name: "薯条", value: 654 },
              // 其他数据点
            ],
            emphasis: {
              focus: "self",
              textStyle: {
                fontWeight: "bold",
                fontSize: 40,
              },
            },
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.right {
  flex: 0 0 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
